<template>
	<view class="ReadHistory">
		<!-- 统计信息 -->
		<view class="ReadHistory-info flex align-center margin">
			<view>今天阅读：<text class="text-orange">{{value.todayRead}}</text>本</view>
			<view>本周阅读：<text class="text-orange">{{value.weekRead}}</text>本</view>
			<view>阅读天数：<text class="text-orange">{{value.readDays}}</text>天</view>
			<view>加入天数：<text class="text-orange">{{value.joinDays}}</text>天</view>
		</view>
		<!-- 清空记录 -->
		<view @click="openModalFn" class="margin text-grey">清空记录</view>
		
		<!-- 页面内容 -->
		<CardGrid @handle="handle" type='ReadHistory' :list="value.list"></CardGrid>
		
		<!-- 对话框 -->
		<Modal :show="option.show" @confirm="confirmModelFn" @cancel="cancelModelFn" title="提示">
			<view class="padding">
				option.name ?  <text>{{option.name}}，是否确认删除?</text> : <text>是否清空所有记录?</text>
			</view>
		</Modal>
		
		<!-- ios兼容 -->
		<view class="ios-safe"></view>
	</view>
</template>

<script>
	import CardGrid from '@/plugin/card_grid.vue';
	import Modal from '@/plugin/modal.vue';
	
	import * as api from '@/api/ReadHistory/index.js';
	export default {
		components:{CardGrid,Modal},
		data(){
			return {
				value:{
					list:[{},{},{}]
				},
				option:{
					show:false
				}
			}
		},
		onLoad() {
			this.getRequest();
		},
		methods:{
			// 前往阅读页面
			handle(item){
			  uni.navigateTo({
			  	url:'/pages/ReadBook/index?id='+item.id
			  })	
			},
			// 打开弹窗
			openModalFn(val){
				if(val){
					this.option={
						show:true,
						...val
					}
				}else{
					this.option={show:true};
				}
			},
			// 确认
			async confirmModelFn(){
				try{
					if(this.option.name){
						let res=await api.cleanHistory();
						if(res.code===0){
							this.getRequest();
						}
					}
				}finally{
					this.cancelModelFn();
				}
			},
			// 关闭弹窗
			cancelModelFn(){
				this.$set(this.option,'show',false);
			},
			// 页面数据
			async getRequest(){
				let res=await api.readSummary();
				if(res.code!==0) return false;
				let value={};
				value={...res.data};
				res=await api.recentReadList();
				if(res.code!==0) return false;
				value['list']=res.data;
				this.value=value;
			}
		}
	}
</script>

<style lang="scss">
	.ReadHistory{
		.ReadHistory-info{
			flex-wrap: wrap;
			>view{
				width: 50%;
				margin: 5upx 0;
			}
		}
	}
</style>